<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>限时秒杀</title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link href="css/common.css" rel="stylesheet" type="text/css" />
	<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<section class="jq22-flexView">
	<!-- <header class="jq22-navBar jq22-navBar-fixed">
		<a href="javascript:;" class="jq22-navBar-item">
			<i class="icon icon-return"></i>
		</a>
		<div class="jq22-center">
			<span class="jq22-center-title">限时秒杀</span>
		</div>
		<a href="javascript:;" class="jq22-navBar-item">
			<i class="icon icon-sys"></i>
		</a>
	</header> -->
	<section class="jq22-scrollView">
		<div class="jq22-ate-head">
			<div class="jq22-ad-img">
				<img src="images/04584fa6996df2c.jpg" alt="">
			</div>
			<div class="jq21-flex jq21-flex-one">
				<div id="timeList" class="timeList"></div>
			</div>
		</div>
		<div class="loading" id="loading" style="display: none;">拼命加载中...</div>
		<div class="jq22-ate-list">
			
		</div>

	</section>
</section>
</body>
<script src="./js/jquery-1.8.2.min.js"></script>
<script src="./js/request.js"></script>
<script>
	function clicktorn(item) { 
 			console.log("item",item);
            let params = {
               	item:item,
            };
            window.ReactNativeWebView.postMessage(JSON.stringify(params));
     }
	jQuery(function(){
		function getStrMonth(num){
          return num <10 ? '0' + num:num
		}
		function getTimeStamp(time){
			var date = new Date()
			var dateStr = date.getFullYear() + '-' + getStrMonth(date.getMonth()+1) + '-' + date.getDate()
			var str = dateStr + ' ' + time;
			return Date.parse(new Date(str)); // 把日期格式转成时间戳
		}
		function generateList(data){ // 生成列表
		    var strHtml = ``;
			$("#loading").css('display','block')
            request('goods/getSecKillGoods',data).then(data=>{
					// <p>以抢40件</p>
					// 				<span>11%</span> <h2><i class="icon icon-mall"></i>${data.res[i].name}</h2>
					$("#loading").css('display','none')
					if(data.res.length){
						for(var i = 0;i<data.res.length;i++){
							let item=data.res[i];
                        strHtml += `
						<a href="javascript:;" class="jq22-flex">
							<div class="jq22-pd-img">
								<img src="${data.res[i].cover}" alt="">
							</div>
							<div class="jq22-flex-box">
								<h2><i class="icon icon-mall"></i>${data.res[i].name}</h2>
								<div class="yiqian">
									
								</div>
								<div class="jq22-flex jq22-flex-two">
									<div class="jq22-flex-box">
										<p>￥${data.res[i].price}<span> ￥${data.res[i].oldprice}</span></p>
									</div>
									<div class="jq22-chang-box">
										<button onclick=clicktorn(${item.id})>马上抢</button>
									</div>
								</div>
							</div>
						</a>
						`
				     }
						$('.jq22-ate-list').html(strHtml)
					}else{
						$('.jq22-ate-list').html('<p class="noData">暂无数据!</p>')
					}
					
					
				  // console.log(data)
			})
		}

		function  makePanicPurchase(){ // 设置抢购
            var arrTime = [
				{time:'10:00',label:'',className:''}, // 已开抢
				{time:'11:00',label:'',className:''}, //抢购进行中
				{time:'12:00',label:'',className:''}, //即将开场
				{time:'13:00',label:'',className:''}, //即将开场
				{time:'14:00',label:'',className:''},
				{time:'15:00',label:'',className:''},
				{time:'16:00',label:'',className:''},
				{time:'17:00',label:'',className:''},
				{time:'18:00',label:'',className:''},
				{time:'19:00',label:'',className:''},
				{time:'20:00',label:'',className:''},
				{time:'21:00',label:'',className:''},
				{time:'22:00',label:'',className:''}
		    ];
			var timeNow = new Date().getHours();
			var data = {};
			var str = ``;
			for(var i = 0;i<arrTime.length;i++){
				var time = parseInt(arrTime[i].time.split(':')[0]) + parseFloat(arrTime[i].time.split(':')[1]/60)
				if( time - timeNow <= -1 ){ // 时间过去两小时及以上
					arrTime[i].label = '已结束'
				}else if( time -timeNow >-0.95 && time -timeNow <=0 ){ // 设定的时间以现在的时间一样或者大于当前时间
					arrTime[i].label = '抢购进行中'
					arrTime[i].className = 'active'
					data.start = getTimeStamp(arrTime[i].time)
					data.end = data.start + 3600000 // 3600000为一个小时
					generateList(data)
				}else if(time - timeNow > 0 && time - timeNow <= 2){ //设定的时间比当前时间大
					arrTime[i].label = '即将开场'
				}else if( time - timeNow > 2 ){ // 
					arrTime[i].label = '即将开场'
					data.start = getTimeStamp(arrTime[0].time)
			     	data.end = data.start + 3600000 // 3600000为一个小时
					generateList(data) 
				}
			}

			
			for( var i = 0;i<arrTime.length;i++ ){
				str += `<div class="${arrTime[i].className}"><a href="javascript:;" class="jq21-flex-box">
					    	<p>${ arrTime[i].time }<br>${ arrTime[i].label }</p>
						</a></div>`
			}
			jQuery("#timeList").html(str)
			jQuery("#timeList").width(arrTime.length*jQuery("#timeList > div").eq(0).width() + arrTime.length +'px')
			jQuery("#timeList > div").bind('click',function(){
				var index = jQuery(this).index();
				$('.jq22-ate-list').html('');
				jQuery(this).addClass('active').siblings().removeClass('active');
				data.start = getTimeStamp(arrTime[index].time)
				data.end = data.start + 3600000 // 3600000为一个小时
				generateList(data)
			})


		}

		request('reciveaddress/list',{token:3}).then(res=>{
			console.log(res)
		})
		
		makePanicPurchase()
        
		setInterval(function(){
			makePanicPurchase()
		},600000)
		

	})
</script>
</html>